/*
  学习目标：props深入-children属性的基本使用
  children: 特指组件标签夹着的内容区域, 🔔类似vue中的插槽概念
  特点: 可以传递任意的数据类型
 
*/
import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        {/* <Hello>123</Hello>
        <Hello>{123}</Hello>
        <Hello>{undefined}</Hello>
        <Hello>{null}</Hello>
        <Hello>{true}</Hello> */}
        {/* 💥 函数 */}
        <Hello>
          {() => {
            return <h1>123</h1>;
          }}
        </Hello>
        {/* 💥JSX */}
        <Hello2>
          <i>我是斜着的i标签</i>
        </Hello2>
      </div>
    );
  }
}

function Hello2(props) {
  console.log('props  ----->  ', props);
  return (
    <div>
      Hello
      {props.children}
    </div>
  );
}

function Hello(props) {
  return (
    <div>
      Hello
      {props.children()}
    </div>
  );
}
